<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li><a onclick="go('/a')">/a</a></li>
        <li><a onclick="go('/b')">/b</a></li>
        <li><a onclick="go('/c')">/c</a></li>
        <li><a onclick="forward()">前进</a></li>
        <li><a onclick="back()">后退</a></li>
    </ul>
    <div id="root"></div>
    <script>
        let {history} = window;
        function render(){
            root.innerHTML = `路径${window.location.pathname}的内容`;
        }
        //当前进和后退的时候，也就是指针移动的时候会触发popstate事件
        //我们可以通过监听此事件监听路径变化，改变root的内容
        window.onpopstate = render;
        function go(url){
            history.pushState({},null,url);
            render();
        }
        function forward(){
            //history.go(1);
            history.forward();
        }
        function back(){
             //history.go(-1);
             history.back();
        }
    </script>
</body>
</html>